<template>
  <el-form label-width="100px" size="mini">
    <el-form-item required label="生效时间：">
      <el-date-picker
        v-model="linkageFormData.beginTime"
        type="datetime"
        placeholder="开始日期"
        style="width: 190px;"
        format="yyyy-MM-dd HH:mm:ss"
        value-format="yyyy-MM-dd HH:mm:ss"
        @change="(e) => handleInput(e, 'beginTime')"
      />
      <span class="line">-</span>

      <el-date-picker
        v-model="linkageFormData.endTime"
        type="datetime"
        placeholder="结束日期"
        style="width: 190px;"
        format="yyyy-MM-dd HH:mm:ss"
        value-format="yyyy-MM-dd HH:mm:ss"
        @change="(e) => handleInput(e, 'endTime')"
      />
    </el-form-item>
    <el-form-item required label="检查周期：">
      <CycleTemplate :value="cycleTypeParam" @change="handleCycleChange" />
    </el-form-item>
    <el-form-item required label="联动工具：">
      <CheckBoxGroupView
        :value="linkageFormData.notifySofts"
        :option-list="notifySoftsMap"
        @change="(e) => handleInput(e, 'notifySofts')"
      />
    </el-form-item>
    <el-form-item label="联动通知：">
      <template v-for="(warnItem, warnIndex) in warnList">
        <div :key="warnIndex" class="aaa">
          <div class="">
            {{ warnItem.name }}
          </div>
          <el-form-item label="短信通知人：" label-width="107px" style="margin-right:0 !important;">
            <StaffTemplate :value="warnItem.smsNotifierList" @change="(e) => handleWarnNotifierChange(e, 'smsNotifierList', warnIndex)" />
          </el-form-item>
          <el-form-item label="销项执行人：" label-width="107px" style="margin-right:0 !important;">
            <StaffTemplate :value="warnItem.warningTaskExecuteList" @change="(e) => handleWarnNotifierChange(e, 'warningTaskExecuteList', warnIndex)" />
          </el-form-item>
          <el-form-item label="销项关注人：" label-width="107px" style="margin-right:0 !important;">
            <StaffTemplate :value="warnItem.warningTaskFocusList" @change="(e) => handleWarnNotifierChange(e, 'warningTaskFocusList', warnIndex)" />
          </el-form-item>
        </div>
      </template>
    </el-form-item>
  </el-form>
</template>

<script>
import { notifySoftsMap } from '@/config/dict'
import CycleTemplate from '../../CycleTemplate/index'
import CheckBoxGroupView from '@/components/CheckBoxGroupView/index'
import StaffTemplate from '@/containers/StaffTemplate/index'
import { isValid, isValidArray } from '../../../../../../utils'

export default {
  name: 'LinkageForm',
  components: { CycleTemplate, CheckBoxGroupView, StaffTemplate },
  data() {
    return { notifySoftsMap }
  },
  computed: {
    linkageFormData: function() {
      return this.$store.state.businessFormData.linkageForm.data || {}
    },
    cycleTypeParam: function() {
      const _linkageFormData = this.$store.state.businessFormData.linkageForm.data || {}
      const { cycleType, cycleParams } = _linkageFormData
      return { cycleType, cycleParams }
    },

    warnList: function() {
      const businessFormData = this.$store.state.businessFormData.businessForm.data || []
      return businessFormData
    }

  },
  watch: {
    linkageFormData: {
      handler: function(val) {
        this.checkStatue(val)
      },
      immediate: true
    }
  },
  methods: {
    checkStatue(data) {
      let status = true
      const errMsg = []

      if (!isValid(data.beginTime)) {
        status = false
        errMsg.push('请选择生效的开始时间')
      }
      if (!isValid(data.endTime)) {
        status = false
        errMsg.push('请选择生效的结束时间')
      }
      if (!isValid(data.cycleType) || (data.cycleType !== 1 && !data.cycleParams)) {
        status = false
        errMsg.push('请选择检查周期')
      }
      if (!isValidArray(data.notifySofts)) {
        status = false
        errMsg.push('请勾选联动工具')
      }

      const oldErrMsg = this.$store.state.businessFormData.linkageForm.errMsg
      if (JSON.stringify(oldErrMsg) !== JSON.stringify(errMsg)) {
        this.$store.dispatch('businessFormData/setLinkageFormData', { status, errMsg })
      }
    },
    formatWarnNotifier(index) {
      this.warnList[index]
      return
    },
    handleInput(e, type) {
      const data = { ...this.linkageFormData, [type]: e }
      this.$store.dispatch('businessFormData/setLinkageFormData', { data })
    },
    handleCycleChange(e) {
      this.handleInput(e.cycleType, 'cycleType')
      this.handleInput(e.cycleParams, 'cycleParams')
    },

    // 联动配置值 设置
    // 注: [此处的值是设置到了BusinessData 中 , 并非再 LinkageData 中]
    handleWarnNotifierChange(e, type, index) {
      this.warnList[index][type] = e
      const current = { ...this.warnList[index], [type]: e }
      this.$set(this.warnList, index, current)
      this.$store.dispatch('businessFormData/setBusinessFormData', { data: this.warnList })
    }
  }
}
</script>

<style lang="scss" scoped>
  .line {
    margin: 0 10px;
  }
</style>
